<!--
 * @Author: 贵鸿 喻 2816980429@qq.com
 * @Date: 2022-06-29 15:47:04
 * @LastEditors: 贵鸿 喻 2816980429@qq.com
 * @LastEditTime: 2022-07-01 16:47:03
 * @FilePath: \vue_basic\02_Vue模板语法\模板语法.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入vue -->
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!-- 
				Vue模板语法有2大类：
					1.插值语法：
							功能：用于解析标签体内容。
							写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->

     <!-- 准备好一个容器 -->
     <div id="root">
       <h1>插值语法</h1>
       <h3>你好，{{ name }}</h3>
       <hr>
       <h1>指令语法</h1>
       <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
       <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>

    </div>
 
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。

        // 创建Vue实例
        new Vue({
            el: "#root",
            data: {
                name: 'Jack',
                school: {
                    name: '尚硅谷',
                    url: 'http://www.atguigu.com'
                }
            }
        })
    </script>
</body>
</html>

